<template>
  <div class="goods-content">
    <div class="title">
      <h3 class="text">商品列表</h3>
      <div class="newData">
        <el-button type="primary" @click="newDataProduct">新增商品</el-button>
      </div>
    </div>
    <el-table :data="productData" style="width: 100%" border>
      <el-table-column align="center" type="index" prop="index" label="序号" width="80" />
      <el-table-column align="center" prop="name" label="商品名称" width="100">
        <template #default="scope">
          <div class="over-text">
            {{ scope.row.name }}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="oldPrice" label="原价格" width="80" />
      <el-table-column align="center" prop="newPrice" label="新价格" width="80" />
      <el-table-column align="center" prop="desc" label="商品描述" width="100">
        <template #default="scope">
          <div class="over-text">
            {{ scope.row.desc }}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="status" label="状态" width="60" />
      <el-table-column align="center" prop="imgUrl" label="图片" width="100">
        <template #default="scope">
          <img class="imgUrl" :src="scope.row.imgUrl" />
        </template>
      </el-table-column>
      <el-table-column align="center" prop="favorCount" label="收藏" width="60" />
      <el-table-column align="center" prop="address" label="地址" width="60" />
      <el-table-column align="center" prop="createAt" label="创建时间" width="170">
        <template #default="scope">
          {{ formatDay(scope.row.createAt) }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="updateAt" label="更新时间" width="170">
        <template #default="scope">
          {{ formatDay(scope.row.updateAt) }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="handler" label="操作">
        <template #default="scope">
          <el-button size="small" type="primary">
            <el-icon><Edit /></el-icon>
          </el-button>
          <el-button type="danger" size="small" @click="deleteProductData(scope.row.id)">
            <el-icon><Delete /></el-icon>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 15]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import useProductStore from '@/store/modules/product'
import { storeToRefs } from 'pinia'
import { formatDay } from '@/utils/format'
import { ref } from 'vue'

// const props = defineProps<Iprops>()
const emit = defineEmits(['newDataProduct'])
const productStroe = useProductStore()
// 初始的页数
const currentPage = ref(1)
// 初始的数量
const pageSize = ref(10)
// 保存父组件传过来的数据
const formData = ref()
// $onAction监听 action 和它们的结果
// after 在 action 返回或解决后的钩子
productStroe.$onAction(({ name, after }) => {
  after(() => {
    if (name === 'fetchProductList') {
      // currentPage.value = 1
    }
  })
})
// 初始调用方法请求数据
postProductList()
function postProductList(formVal?: any) {
  formData.value = formVal
  const info = {
    offset: (currentPage.value - 1) * pageSize.value,
    size: pageSize.value
  }
  productStroe.fetchProductList({ ...info, ...formVal })
}

function handleSizeChange(value: any) {
  pageSize.value = value
  postProductList(formData.value)
}
function handleCurrentChange(value: any) {
  currentPage.value = value
  postProductList(formData.value)
}

// 商品列表的数据
const { productData, totalCount } = storeToRefs(productStroe)

// 删除商品
function deleteProductData(id: number) {
  productStroe.fetchDeleteProduct(id)
}
// 添加商品
function newDataProduct() {
  emit('newDataProduct')
}
defineExpose({
  postProductList
})
</script>

<style lang="less" scoped>
.goods-content {
  .title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  padding: 20px;
  border-radius: 5px;
  margin-top: 20px;
  background: var(--el--page--search--bg--);
  border: 1px solid var(--el-border-color);
}
.over-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.imgUrl {
  width: 60px;
  height: 60px;
}
.page {
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
}
</style>
